<template>
  <!-- 预约医生 -->
  <div class="doctorAppointment">
    <div class="title">Quickly schedule an appointment with a doctor.</div>
    <div class="line" style="margin-top:39px;">
      <div class="que">Your name</div>
      <input placeholder="Please input your name/title." class="ans" v-model="leaveWord.name"/>
    </div>
    <div class="line">
      <div class="que" style="line-height: 20px;">Phone<span style="color:red;">*</span><br/>WeChat</div>
      <input placeholder="Please enter your contact information accurately." class="ans" v-model="leaveWord.tel"/>
    </div>
    <div class="line">
      <div class="que">information</div>
      <textarea placeholder="Please enter information about your illness." class="information_input" v-model="leaveWord.content"></textarea>
    </div>
    <div class="submit" @click="submit()">Click submit now.</div>
  </div>
</template>

<script>
import { addLeaveWord } from '@/api/api'
export default {
  data () {
    return {
      leaveWord:{
        name:'',
        tel:'',
        content:'',
      }
    }
  },
  methods:{
    submit(){
      if('' == this.leaveWord.tel || null == this.leaveWord.tel){
        this.$message({
          message: 'Please enter your contact information accurately.',
          type: 'warning'
        });
        return;
      }
      this.$axios.post(addLeaveWord , this.leaveWord).then(res=>{
        this.$message({
          message: res.msg,
          type: 'warning'
        });
        this.leaveWord.name = ''
        this.leaveWord.tel = ''
        this.leaveWord.content = ''
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.doctorAppointment{
  border-radius: 8px;
  background: linear-gradient( 180deg, #D9E5FF 0%, rgba(232,239,255,0.5) 100%);
  padding: 35px 49px 78px 40px;
  position: relative;
  .title{
    font-weight: bold;
    font-size: 28px;
    color: #0041A3;
    line-height: 28px;
  }
  .line{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
    .que{
      font-weight: 400;
      font-size: 14px;
      color: #2E343E;
      text-align: right;
      line-height: 40px;
      width: 83px;
    }
    .ans{
      margin-left: 8px;
      border-radius: 4px;
      border: 1px solid #E4E9F3;
      line-height: 40px;
      padding-left: 16px;
      width: 620px;
    }
    .information_input{
      margin-left: 8px;
      padding-left: 16px;
      border-radius: 4px;
      border: 1px solid #E4E9F3;
      line-height: 40px;
      max-width: 620px;
      min-width: 620px;
      min-height: 126px;
      outline: none;
      font-family: Arial, Arial;
    }
  }
  .submit{
    position: absolute;
    background: #0078FF;
    border-radius: 8px;
    line-height: 42px;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
    padding: 0 16px;
    bottom: 36px;
    right: 55px;
    cursor: pointer;
  }
}
</style>